<template>
  <div>
    <h1>Main Container</h1>
    <code-holder
      v-for="code in codeSnipped.codes"
      :key="code.code"
      :code="code"
    ></code-holder>
  </div>
</template>

<script lang="ts">
import CodeHolder from "@/components/CodeHolder.vue";
import { defineComponent, onBeforeMount, reactive } from "vue";
import { fetchUserCodeSnipastes } from "../apis";

export default defineComponent({
  name: "MainHolder",
  components: {
    CodeHolder,
  },
  setup() {
    let codeSnipped = reactive({
      codes: [],
      name: "",
    });

    const getSnippetsByName = () => {
      fetchUserCodeSnipastes("masaikk").then((res) => {
        res.json().then((json) => {
          codeSnipped.codes = json.codeData;
          codeSnipped.name = json.userName;
        });
      });
    };

    onBeforeMount(() => {
      getSnippetsByName();
    });

    return {
      getSnippetsByName,
      codeSnipped,
    };
  },
});
</script>

<style scoped></style>
